﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Matjar - Minimalist UI eCommerce Mobile Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="HandheldFriendly" content="True">

	<link rel="stylesheet" href="css/materialize.min.css">
	<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/owl.carousel.css">
	<link rel="stylesheet" href="css/owl.theme.css">
	<link rel="stylesheet" href="css/owl.transitions.css">
	<link rel="stylesheet" href="css/fakeLoader.css">
	<link rel="stylesheet" href="css/magnific-popup.css">
	<link rel="stylesheet" href="css/style.css">
	
	<link rel="shortcut icon" href="img/favicon.png">

</head>
<body>

	<!-- navbar top -->
	<div class="navbar-top">
		<div class="side-nav-panel-left">
			<a href="#" data-activates="slide-out-left" class="side-nav-left"><i class="fa fa-bars"></i></a>
		</div>
		<!-- site brand	 -->
		<div class="site-brand">
			<a href="index.html"><h1>MATJAR</h1></a>
		</div>
		<!-- end site brand	 -->
		<div class="side-nav-panel-right">
			<a href="cart.html" class="side-nav-right"><i class="fa fa-shopping-basket"></i><span>2</span></a>
		</div>
	</div>
	<!-- end navbar top -->

	<!-- side nav left-->
	<div class="side-nav-panel-left">
		<ul id="slide-out-left" class="side-nav side-nav-panel collapsible">
			<li class="profil">
				<img src="img/profile.jpg" alt="">
				<h2>John Doe</h2>
				<h6>Mobile Developer</h6>
			</li>
			<li class="li-top"><a href="index.html"><i class="fa fa-home"></i>Home</a></li>
			<li><a href="product.html"><i class="fa fa-shopping-basket"></i>Product List</a></li>
			<li><a href="shop-single.html"><i class="fa fa-list-alt"></i>Product Details</a></li>
			<li><a href="cart.html"><i class="fa fa-shopping-cart"></i>Shopping Cart</a></li>
			<li><a href="checkout.html"><i class="fa fa-send"></i>Checkout</a></li>
			<li><a href="blog.html"><i class="fa fa-bold"></i>Blog</a></li>
			<li><a href="error404.html"><i class="fa fa-hourglass-half"></i>404</a></li>		
			<li><a href="testimonial.html"><i class="fa fa-support"></i>Testimonial</a></li>
			<li><a href="about-us.html"><i class="fa fa-user"></i>About Us</a></li>
			<li><a href="contact.html"><i class="fa fa-envelope-o"></i>Contact Us</a></li>
			<li><a href="login.html"><i class="fa fa-sign-in"></i>Login</a></li>
			<li><a href="register.html"><i class="fa fa-user-plus"></i>Register</a></li>
		</ul>
	</div>
	<!-- end side nav left-->

	
	<!-- single post -->
	<div class="pages section">
		<div class="container">
			<div class="blog-single">
				<img src="img/blog1.png" alt="">
				<div class="blog-single-content">
					<h5>How To Design Fresh and Clean</h5>
					<div class="date">
						<span><i class="fa fa-calendar"></i> Dec 22, 2018</span>
					</div>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi error quibusdam culpa assumenda maiores ea dicta fuga a itaque rerum deserunt, incidunt, nulla, vero amet sapiente reiciendis. Perspiciatis debitis, accusamus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus eligendi porro deleniti quisquam omnis rem quibusdam corporis alias, et quae, assumenda unde pariatur vitae placeat veritatis nam quia, velit delectus.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint ut vitae recusandae perferendis, temporibus, ullam, tenetur eius necessitatibus aliquam sequi, eum atque ratione ipsam in aliquid vero numquam id minus!</p>	
					<div class="share-post">	
						<ul>
							<li><a href=""><i class="fa fa-facebook"></i></a></li>
							<li><a href=""><i class="fa fa-twitter"></i></a></li>
							<li><a href=""><i class="fa fa-google"></i></a></li>
							<li><a href=""><i class="fa fa-linkedin"></i></a></li>
						</ul>
					</div>
				</div>	
				<div class="comment">
					<h5>1 Comments</h5>
					<div class="comment-details">
						<div class="row">
							<div class="col s3">
								<img src="img/user-comment.jpg" alt="">
							</div>
							<div class="col s9">
								<div class="comment-title">
									<span><strong>John Doe</strong> | Juni 5, 2016 at 9:24 am | <a href="">Reply</a></span>
								</div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis accusantium corrupti asperiores et praesentium dolore.</p>
							</div>
						</div>
					</div>
				</div>	
				<div class="comment-form">
					<div class="comment-head">
						<h5>Post Comment in Below</h5>
						<p>Lorem ipsum dolor sit amet consectetur*</p>
					</div>
					<div class="row">
						<form class="col s12 form-details">
							<div class="input-field">
								<input type="text" required class="validate" placeholder="Name">
							</div>
							<div class="input-field">
								<input type="email" class="validate" placeholder="Email" required>
							</div>
							<div class="input-field">
								<input type="text" class="validate" placeholder="Subject" required>
							</div>
							<div class="input-field">
								<textarea name="textarea-message" id="textarea1" cols="30" rows="10" class="materialize-textarea" class="validate" placeholder="Your Comment"></textarea>
							</div>
							<div class="form-button">
								<button class="button-default">Post Comments</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>	
	</div>
	<!-- end single post -->
	

	<!-- loader -->
	<div id="fakeLoader"></div>
	<!-- end loader -->
	
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="about-us-foot">
				<h6>MATJAR</h6>
				<p>is a lorem ipsum dolor sit amet, consectetur adipisicing elit consectetur adipisicing elit.</p>
			</div>
			<div class="social-media">
				<a href=""><i class="fa fa-facebook"></i></a>
				<a href=""><i class="fa fa-twitter"></i></a>
				<a href=""><i class="fa fa-google"></i></a>
				<a href=""><i class="fa fa-linkedin"></i></a>
				<a href=""><i class="fa fa-instagram"></i></a>
			</div>
			<div class="copyright">
				<span>© 2018 All Right By </span>
			</div>
		</div>
	</div>
	<!-- end footer -->
	
	<!-- scripts -->
	<script src="js/jquery.min.js"></script>
	<script src="js/materialize.min.js"></script>
	<script src="js/owl.carousel.min.js"></script>
	<script src="js/fakeLoader.min.js"></script>
	<script src="js/main.js"></script>

</body>
</html>